<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>只定制</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/activityStr.css?v=1.0.0"/>
	</head>
	<body>
		<div class="container">
			<div class="top">
				<div class="avatarUrlBox">
					<img 
						 class="avatarUrl"	src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1224306677,1730366661&fm=27&gp=0.jpg" alt="头像" >
				</div>
				<div class="call">
					<img class="callbg" src="images/1.png">
					<div class="callTxt">
						这是我创造的<span>定制酒</span>。
						我要酒票,帮我点赞
						<img  class="like"  src='images/1-2.png' align="absmiddle"/>
					</div>
				</div>
				<div class="ticket">
					<img class="tickbg" src="images/2.png">
					<!--
                    	已结束状态图片   <img class="tickbg" src="images/2-2.png">
                    -->
					<div class="tickTxt">
						<p><i>￥</i><b>200</b></p>
						<p>酒票</p>
					</div>
				</div>
			</div>
			<div class="center">
				<!--结束时间-->
				<div class="timerBox">
					<img class="timeIcon" src="images/3.png"  />
					<span class="timeTxt"><b>15:08:24</b>后结束</span>
				</div>
				<!--已结束状态时间-->
				<!--<div class="timerBox">
					<img class="timeIcon" src="images/3-2.png"  />
					<span class="timeTxt"><b class="endtime">00:00:00</b>后结束</span>
				</div>-->
				<!--评论人-->
				<div class="commentManBox">
					<img class="commentMan" src="images/4.png">
					<div class="commentTxt">
						<img class="commentManIcon" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1514772015,3464222502&fm=27&gp=0.jpg" />
						<p class="commentText">赏你好评，不为别的，就因为你长得帅</p>
					</div>
				</div>
				<!--酒瓶-->
				
				<div class="bottleBox">
					<img class="bottleIcon" src="images/20.png" />
					
					<!--文字说明-->
					<div class="textBox">
						<div class="lineL"></div>
	                	<div class="text">还有<b>2</b>颗星就可以获得酒票啦!</div>
	                	<!--已结束状态 文字说明-->
	                	<!--<div class="text">时间结束，重新参与请点<span style="color:#903991;font-weight: 600;">我要玩</span></div>-->
	                	<div class="lineR"></div>
	           		 </div>
	           		 
				</div>
				
				<!--点赞-->
				<div class="voteBox">
					<div class="voteItem">
						<img src="images/5.png">
					</div>
					<div class="voteItem">
						<img src="images/5.png">
					</div>
					<div class="voteItem">
						<img src="images/5.png">
					</div>
					<div class="voteItem">
						<img src="images/5-2.png">
					</div>
					<div class="voteItem">
						<img src="images/5-2.png">
					</div>
					<div class="voteIconBox">
						<img src="images/6.png">
						<p>点赞</p>
					</div>
					<div class="commmentBoxIcon">
						<img src="images/7.png">
						<p>评论</p>
					</div>
				</div>
			</div>
			<!--中间 end-->
		</div>
		<footer id="footer">
			<div class="footerL">
				<img src="images/23.png" align="absmiddle">&nbsp;&nbsp;我要玩
			</div>
			<div class="footerR">
				<img src="images/24.png" align="absmiddle">&nbsp;&nbsp;定这瓶
			</div>
		</footer>
		
		<!--我要评论弹窗 str-->
		<div class="commentPropMask">
			<div class="mask"></div>
			<div class="commentPropBox">
				<div class="commentPropTitle">
					<img src="images/12.png">说点什么吧
				</div>
				<div class="commentPropCheckBox">
					<div class="commentPropCheckItem">
						<img class="avatarUrlList" src="images/13.png">人品大爆发！
					</div>
					<div class="commentPropCheckItem">
						<img  class="avatarUrlList" src="images/13-2.png">赏你好评不为别的,就因你长得帅！
					</div>
					<div class="commentPropCheckItem">
						<img class="avatarUrlList"  src="images/13-2.png">有颜有才华,不赏你还能赏谁？
					</div>
					<div class="commentPropCheckItem">
						<img class="avatarUrlList" src="images/13-2.png">不用谢,应为我人好！
					</div>
					<div class="commentPropCheckItem">
						<img class="avatarUrlList"  src="images/13-2.png">礼轻情意重,千万要记住我的好！
					</div>
					<div class="commentPropCheckItem">
						<img class="avatarUrlList"  src="images/13-2.png">我的大恩大德令你没齿难忘！
					</div>
					<div class="commentPropCheckItem">
						<img class="avatarUrlList"  src="images/13-2.png">什么都不说,我是打酱油的！
					</div>
				</div>
				<div class="commentTextareaBox">
					<textarea placeholder="多说两句吧！"></textarea>
				</div>
				<div class="commentPropBtnBox">
					<img src="images/15.png">
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				$(document).on("click",".commmentBoxIcon",function(){
					$(".commentPropMask").show();//打开评论弹窗
				})
				$(".commentPropBtnBox").find('img').click(function(){
					$(".commentPropMask").hide();//关闭评论弹窗
				})
				
				//点击选择评论内容
				$(".commentPropCheckBox").on("click",'.commentPropCheckItem',function(){
					$(this).find(".avatarUrlList").attr('src','images/13.png').parents().siblings().find(".avatarUrlList").attr('src','images/13-2.png')
					console.log($(this).text())
				})
			})
		</script>
	</body>
</html>
